<template>
    <div class="container">
        <div class="height70"></div>
        <div class="height70"></div>
        <div class="container-title">公司业务</div>
        <div class="height70"></div>
        <div class="height70"></div>
        <div class="height70"></div>
        <div class="content">
           <div class="swiper-wapper">
              <swiper class="swiper" :options="swiperOption">
                <swiper-slide v-for="item in list" :key="item">
                  <img :src="item" alt="家护帮">
                </swiper-slide>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
              </swiper>
            </div>
            <div class="desc-wapper">
                <div class="desc-title">陕西家护帮网络科技有限公司</div>
                <div class="desc-info">公司前身为孝先队实业有限公司</div>
                <div class="desc-text">
                  2017年实现线下到线上的转型，公司主做互联网家政服务，
                  作为一站式服务的C2C+O2O平台，提供专业的技能培训：
                  母婴护理、育儿服务、孕妈课堂、宝妈课堂、保姆、保洁、
                  高级管家等。通过“家护帮”APP平台，足不出户找保洁、保姆、
                  月嫂，妈妈再也不用担心无专人照顾老人小孩，帮助宝妈们的
                  放飞自我，开开心心做辣妈！
                </div>
            </div>
        </div>
        <div class="height70"></div>
        <div class="height70"></div>
    </div>
       
</template>

<script>
export default {
  data () {
      return {
          list: [
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945445&di=a5cd6251afd9056cebaa0d3dec049415&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D57b4e7fb376d55fbd1cb7e65054b253f%2Fb3fb43166d224f4a5187f83603f790529822d1fd.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945449&di=4cd07564d5dc3e500178e5224c48da03&imgtype=0&src=http%3A%2F%2Fwww.hnwomen.org.cn%2Fimg%2Fbig%2F2017%2F05%2F15%2F74a0904202066fa375d129ad200d12f4.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945449&di=55a039810ca01fd0e134bd5fa546daee&imgtype=0&src=http%3A%2F%2Fimg01.e23.cn%2F2016%2F0826%2F20160826064950219.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945448&di=998d046df4b3a8a0237ef0c7fc92f988&imgtype=0&src=http%3A%2F%2Fupload.techweb.com.cn%2F2016%2F0111%2F1452492370102.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945446&di=45a94ec9e4116cc892a239e0e8a1bb5a&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fbainuo%2Fcrop%3D0%2C26%2C471%2C285%3Bw%3D470%3Bq%3D79%2Fsign%3D87f33ab529a446236a85ff22a5125e3c%2F9213b07eca806538e606e4dc9edda144ac348215.jpg',
            
          ],
          swiperOption: {
              autoplay: true,
              navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
              },
          }
      }
  }
}
</script>

<style lang="stylus" scoped>
    .swiper-button-prev, .swiper-button-next {
      
      bottom: 0;
      top: unset;
      width: 75px;
      height: 35px;
      background-size: 13px 24px;
      background-position-y: 6px;
      transition: .35s all; 
      border-radius 10px
      &:hover{
        background-color: #ffb852;
      }
    }
    .swiper-button-next{
      right: 50px;
      left: unset;
      background-color: #6ba0f7;
    }
    .swiper-button-prev {
      right: 150px;
      left: unset;
      background-color: #fff;
      box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.13);
    }
    .swiper-slide
      width 630px
      height 330px
      img 
        width 630px
        height 315px
        object-fit cover
    .content
      display flex
      align-items flex-start
      .swiper-wapper
        width: 630px
        height 330px;
        position relative
        z-index 1
        &:before
          content '' 
          position absolute
          width 100%
          height 315px
          background-color #eee
          top -10px
          left -10px
          z-index -1
          box-shadow -1px -1px 5px 0 rgba(7,17,27,0.2);
        &:after
          content ''
          position absolute
          width 628px
          height 30px
          background-color #5287ff
          top -19px
          left -14px
          z-index -2;
        .swiper
          width: 630px
          height 330px
      .desc-wapper
        flex 1
        color #252525
        padding-left 65px
        letter-spacing 3px
        line-height 24px
        .desc-title
          font-size 30px
          margin-bottom 10px
        .desc-info
          font-size 18px
          margin-bottom 15px
          padding-bottom 10px
          border-bottom 1px solid #eee
        .desc-text  
          margin-top 15px
          font-size 14px
</style>

